<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的音乐</title>
    <link rel="stylesheet" href="./src/scss/mobile.scss" media="(max-width: 560px)">
    <link rel="stylesheet" href="./src/scss/desktop.scss" media="(min-width: 560px)">
</head>
<body>
    <div id="player">
        <header class="songTop">
            <h2>情深深雨蒙蒙</h2>
            <p>杨胖雨</p>
            <div class="down"></div>
            <div class="share"></div>
        </header>
        <section class="songMain">
            <div class="panel-effect">
                <div class="cover">
                    <div class="square"><img src="./img/cover.jpg" alt=""></div>
                </div>
                <div class="mini-lyric">
                    <p class="current">情深深雨蒙蒙</p>
                    <p>多少楼台烟雨中</p>
                </div>
            </div>
            <div class="panel-lyrics">
                <div class="container"></div>
                <div class="shadow"></div>
            </div>
        </section>
        <footer class="songBottom">
            <!-- <div class="option">
                <svg class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
                    <use xlink:href="#icon-like-1"></use>
                </svg>
                <svg class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
                    <use xlink:href="#icon-xiazai"></use>
                </svg>
                <svg class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
                    <use xlink:href="#icon-pinglun"></use>
                </svg>
                <svg class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
                    <use xlink:href="#icon-gengduo2"></use>
                </svg>
            </div> -->
            <div class="bar-area">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="time clearfix">
                    <div class="time-start">00:00</div>
                    <div class="time-end">00:00</div>
                </div>
            </div>
            <div class="actions">
                <svg xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
                    <use xlink:href="#icon-cycle"></use>
                  </svg>
                <svg xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
                    <use xlink:href="#icon-047caozuo_shangyishou"></use>
                </svg>
                <svg class="open" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
                    <use xlink:href="#icon-weibiaoti518"></use>
                </svg>
                <svg xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
                    <use xlink:href="#icon-048caozuo_xiayishou"></use>
                </svg>
                <svg xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
                    <use xlink:href="#icon-yinleliebiao"></use>
                </svg>
            </div>
        </footer>
        <div class="playlist"></div>
    </div>
    <div class="QRcode">
        <div class="child">
            <div class="text">
                <h3>请扫码使用手机设备查看</h3>
                <img src="./img/mobile.png" alt="">
            </div>
        </div>
        <div class="collapse">
            <svg xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
                <use xlink:href="#icon-icon-test"></use>
            </svg>
            <span class="content">收起</span>
        </div>
    </div>
    <script src="./src/js/main.js"></script>
</body>
</html>